<template>
    <vue-draggable-resizable
      :key="customId"
      :custom-id="customId"
      :w="width"
      :h="height"
      :x="x"
      :y="y"
      :z="dragchartdata.zindex"
      :parent="true"
      :debug="false"
      :min-width="20"
      :min-height="20"
      :isConflictCheck="false"
      :snap="true"
      :snapTolerance="10"
      :active="activeId == customId"
      :scaleRatio="scale"
      :selected="selected"
      :onCtrl="onCtrl"
      :ctrlSelectArr="ctrlSelectArr"
      :draggable="isUnlocked"
      :resizable="isUnlocked"
      @dragging="onDrag"
      @resizing="onResize"
      @dragstop="onDragstop"
      @resizestop="onResizstop"
      @refLineParams="getRefLineParams"
      @activated="onActivated"
      @deactivated= "onDeactivated"
      class="test3"
      class-name-dragging="my-dragging-class"
      class-name-resizing="my-resizing-class"
      class-name-active="my-active-class"
      class-name-selected="ctrlSelected"
    >
      <!-- 判断显示组件 -->
      <!--{{x}}-{{y}}-{{customId}}-->
      <bar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-if="chartType == 'bar'"/>
      <line-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'line'"/>
      <scatter-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'scatter'"/>
      <double-bar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'doublebar'"/>
      <staggered-label-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'staggeredLabel'"/>
      <cylinder-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'cylinder'"/>
      <top-bar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'topbar'"/>
      <paralle-bar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'parallebar'"/>
      <doubley-axis-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'doubleyAxis'"/>
      <double-direction-bar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'doubleDirectionBar'"/>
      <single-column-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'singleColumn'"/>
      <double-bar-time-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'doublebartime'"/>
      <three-d-bar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'threeDBar'"/>
      <rate-bar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'rateBar'"/>
      <pie-line-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'pieline'"/>
      <bar-pie-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'barPie'"/>
      <line-bar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'linebar'"/>
      <map-bar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" :customId="customId" v-else-if="chartType == 'mapbar'"/>
      <normal-text :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'text'"/>
      <lamp-text :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :customId="customId" v-else-if="chartType == 'lamp'"/>
      <date-text :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'date'"/>
      <image-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'img'"/>
      <q-rcode-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'qRcode'"/>
      <video-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :customId="customId" v-else-if="chartType == 'video'"/>
      <realtime-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :customId="customId" v-else-if="chartType == 'realtime'"/>
      <hyper-link-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :customId="customId" :zIndex="-1" v-else-if="chartType == 'hyperlink'"/>
      <iframe-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :customId="customId" :zIndex="-1" v-else-if="chartType == 'iframe'"/>
      <rotation-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :zIndex="-1" v-else-if="chartType == 'rotation'"/>
      <word-cloud-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'wordcloud'"/>
      <color-block-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'colorBlock'"/>
      <twinkle-border-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'twinkleborder'"/>
      <around-border-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'aroundborder'"/>
      <ray-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'ray'"/>
      <diffuseray-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'diffuseray'"/>
      <midi-keyboard-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'midikeyboard'"/>
      <voiceprint-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'voiceprint'"/>
      <stacked-bar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'stackedBar'"/>
      <shadow-line-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'shadowLine'"/>
      <rain-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'rain'"/>
      <table-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'taBle'"/>
      <table-top-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'tabletop'"/>
      <table-rotation-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'tablerotation'"/>
      <handson-table-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'handsontable'"/>
      <input-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" :customId="customId" v-else-if="chartType == 'input'"/>
      <time-frame-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'timeframe'"/>
      <timeline-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'timeline'"/>
      <cascade-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'cascade'"/>
      <tab-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'tab'"/>
      <pie-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'pie'"/>
      <sankey-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'sankey'"/>
      <ring-pie-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'ringPie'"/>
      <funnel-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'funnel'"/>
      <radar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'radar'"/>
      <gauge-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'gauge'"/>
      <keygauge-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'keygauge'"/>
      <progress-gauge-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'progauge'" />
      <select-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'select'"/>
      <map-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'map'"/>
      <map-line-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'mapline'"/>
      <map-more-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'mapMore'"/>
      <three-d-map-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'threedMap'"/>
      <three-d-map-bar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'threedMapBar'"/>
      <backborder-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'backborder'"/>
      <water-ball-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'waterball'"/>
      <water-ball-line-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'waterballline'"/>
      <circle-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'circle'"/>
      <flop-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'flop'"/>
      <pie-more-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'piemore'"/>
      <progress-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'progress'"/>
      <knowledge-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'knowledge'"/>
      <pops-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'pops'"/>
      <sunburst-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'sunburst'"/>
      <text-check-box :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'textCheckBox'"/>
      <custom-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'customChart'"/>
      <custom-water-ball-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'customWaterBall'"/>
      <scanning-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'scanning'"/>
      <turntable-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'turntable'"/>
      <galaxy-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :customId="customId" v-else-if="chartType == 'galaxy'"/>
      <boxline-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'boxline'"/>
      <tian-di-map-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'tiandiMap'"/>
      <group-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" v-else-if="chartType == 'group'" :drawingList="drawingList"
          :dragchartdata="dragchartdata"
      />
      <card-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'card'" />
      <heatMap-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'heatMap'" />
      <tree-layout-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'relationGraph'" />
      <pictorial-bar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'pictorialBar'"/>
      <custom-threeD-bar-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'CustomThreeDBar'"/>
      <interact-chart :width="width + 'px'" :height="height + 'px'" :chartOption="chartOption" :className="chartOption.animate" :drawingList="drawingList" v-else-if="chartType == 'interact'" />
    
    </vue-draggable-resizable>

</template>

<script>
import VueDraggableResizable from "@/views/components/vue-draggable-resizable";
import "@/views/components/vue-draggable-resizable.css";

import VueEvent from '@/views/tool/datav/VueEvent'

import BarChart from './components/chart/BarChart'
import LineChart from './components/chart/LineChart'
import ScatterChart from './components/chart/ScatterChart'
import StaggeredLabelChart from './components/chart/StaggeredLabelChart'
import DoubleBarChart from './components/chart/DoubleBarChart'
import ParalleBarChart from './components/chart/ParalleBarChart'
import DoubleDirectionBarChart from './components/chart/DoubleDirectionBarChart'
import CylinderChart from './components/chart/CylinderChart'
import DoubleBarTimeChart from './components/chart/DoubleBarTimeChart'
import TopBarChart from './components/chart/TopBarChart'
import DoubleyAxisChart from './components/chart/DoubleyAxisChart'
import SingleColumnChart from './components/chart/SingleColumnChart'
import ThreeDBarChart from './components/chart/ThreeDBarChart'
import NormalText from './components/chart/NormalText'
import LampText from './components/chart/LampText'
import DateText from './components/chart/DateText'
import ImageChart from './components/chart/ImageChart'
import QRcodeChart from './components/chart/QRcodeChart'
import VideoChart from './components/chart/VideoChart'
import RealtimeChart from './components/chart/RealtimeChart'
import HyperLinkChart from './components/chart/HyperLinkChart'
import IframeChart from './components/chart/IframeChart'
import RotationChart from './components/chart/RotationChart'
import ColorBlockChart from './components/chart/ColorBlockChart'
import WordCloudChart from './components/chart/WordCloudChart'
import StackedBarChart from './components/chart/StackedBarChart'
import ShadowLineChart from './components/chart/ShadowLineChart'
import TableChart from './components/chart/TableChart'
import TableRotationChart from './components/chart/TableRotationChart'
import TableTopChart from './components/chart/TableTopChart'
import HandsonTableChart from './components/chart/HandsonTableChart'
import InputChart from './components/chart/InputChart'
import TimeFrameChart from './components/chart/TimeFrameChart'
import TimelineChart from './components/chart/TimelineChart'
import CascadeChart from './components/chart/CascadeChart'
import TabChart from './components/chart/TabChart'
import PieLineChart from './components/chart/PieLineChart'
import BarPieChart from './components/chart/BarPieChart'
import LineBarChart from './components/chart/LineBarChart'
import MapBarChart from './components/chart/MapBarChart'
import TwinkleBorderChart from './components/chart/TwinkleBorderChart'
import AroundBorderChart from './components/chart/AroundBorderChart'
import RayChart from './components/chart/RayChart'
import MidiKeyboardChart from './components/chart/MidiKeyboardChart'
import VoiceprintChart from './components/chart/VoiceprintChart'
import DiffuserayChart from './components/chart/DiffuserayChart'
import RainChart from './components/chart/RainChart'
import PieChart from './components/chart/PieChart'
import RingPieChart from './components/chart/RingPieChart'
import FunnelChart from './components/chart/FunnelChart'
import RadarChart from './components/chart/RadarChart'
import GaugeChart from './components/chart/GaugeChart'
import KeygaugeChart from './components/chart/KeygaugeChart'
import ProgressGaugeChart from './components/chart/ProgressGaugeChart'
import SelectChart from './components/chart/SelectChart'
import MapChart from './components/chart/MapChart'
import MapLineChart from './components/chart/MapLineChart'
import MapMoreChart from './components/chart/MapMoreChart'
import ThreeDMapChart from './components/chart/ThreeDMapChart'
import ThreeDMapBarChart from './components/chart/ThreeDMapBarChart'
import BackborderChart from './components/chart/BackborderChart'
import WaterBallChart from './components/chart/WaterBallChart'
import WaterBallLineChart from './components/chart/WaterBallLineChart'
import CircleChart from './components/chart/CircleChart'
import FlopChart from './components/chart/FlopChart'
import PieMoreChart from './components/chart/PieMoreChart'
import ProgressChart from './components/chart/ProgressChart'
import KnowledgeChart from './components/chart/KnowledgeChart'
import PopsChart from './components/chart/PopsChart'
import SunburstChart from './components/chart/SunburstChart'
import TextCheckBox from './components/chart/TextCheckBox'
import CustomChart from './components/chart/CustomChart'
import CustomWaterBallChart from './components/chart/CustomWaterBallChart'
import ScanningChart from './components/chart/ScanningChart'
import TurntableChart from './components/chart/TurntableChart'
import GalaxyChart from './components/chart/GalaxyChart'
import BoxlineChart from './components/chart//BoxlineChart'
import TianDiMapChart from './components/chart/TianDiMapChart'
import GroupChart from  './components/chart/GroupChart'
import CardChart from './components/chart/CardChart'
import PictorialBarChart from './components/chart/PictorialBarChart' //象形柱图
import CustomThreeDBarChart from './components/chart/CustomThreeDBarChart'
import RateBarChart from './components/chart/RateBarChart'
import SankeyChart from './components/chart/SankeyChart'
import TreeLayoutChart from './components/chart/TreeLayoutChart'
import HeatMapChart from './components/chart/HeatMapChart'
import InteractChart from './components/chart/InteractChart'

export default {
  components: {
    VueDraggableResizable,
    BarChart,
    LineChart,
    ScatterChart,
    DoubleBarChart,
    DoubleDirectionBarChart,
    CylinderChart,
    TopBarChart,
    ParalleBarChart,
    DoubleyAxisChart,
    SingleColumnChart,
    DoubleBarTimeChart,
    ThreeDBarChart,
    NormalText,
    LampText,
    DateText,
    StackedBarChart,
    StaggeredLabelChart,
    ImageChart,
    QRcodeChart,
    VideoChart,
    RealtimeChart,
    HyperLinkChart,
    IframeChart,
    RotationChart,
    ColorBlockChart,
    WordCloudChart,
    ShadowLineChart,
    TableChart,
    TableRotationChart,
    TableTopChart,
    HandsonTableChart,
    InputChart,
    TimeFrameChart,
    TimelineChart,
    CascadeChart,
    TabChart,
    PieLineChart,
    BarPieChart,
    LineBarChart,
    MapBarChart,
    TwinkleBorderChart,
    AroundBorderChart,
    RayChart,
    MidiKeyboardChart,
    VoiceprintChart,
    DiffuserayChart,
    RainChart,
    PieChart,
    RingPieChart,
    FunnelChart,
    RadarChart,
    GaugeChart,
    KeygaugeChart,
    ProgressGaugeChart,
    MapChart,
    MapLineChart,
    MapMoreChart,
    ThreeDMapChart,
    ThreeDMapBarChart,
    SelectChart,
    BackborderChart,
    WaterBallChart,
    WaterBallLineChart,
    CircleChart,
    FlopChart,
    PieMoreChart,
    ProgressChart,
    KnowledgeChart,
    PopsChart,
    SunburstChart,
    TextCheckBox,
    CustomChart,
    CustomWaterBallChart,
    ScanningChart,
    TurntableChart,
    GalaxyChart,
    BoxlineChart,
    TianDiMapChart,
    GroupChart,
    CardChart,
    PictorialBarChart,
    CustomThreeDBarChart,
    RateBarChart,
    SankeyChart,
    TreeLayoutChart,
    HeatMapChart,
    InteractChart
  },
  props: ["dragchartdata", "scale", "activeId", "drawingList", "onCtrl", "ctrlSelectArr"],
  data() {
    return {
      chartOption: this.dragchartdata.chartOption,
      chartType: this.dragchartdata.chartType,
      customId: this.dragchartdata.customId,
      width: this.dragchartdata.width,
      height: this.dragchartdata.height,
      x: this.dragchartdata.x,
      y: this.dragchartdata.y,
      selected: false,
      //是否没被锁定
      isUnlocked: this.dragchartdata.isUnlocked==undefined ? true : this.dragchartdata.isUnlocked,
    };
  },
  watch: {
    dragchartdata: {
      deep: true,
      handler(newVal) {
        //console.log('******',newVal)
        this.chartOption = newVal.chartOption,
        this.chartType = newVal.chartType,
        this.customId = newVal.customId,
        this.width = newVal.width,
        this.height = newVal.height,
        this.x = newVal.x,
        this.y = newVal.y,
        this.animate = newVal.animate,
        this.isUnlocked = newVal.isUnlocked
      }
    },
    ctrlSelectArr: {
      deep: true,
      handler(newVal) {
        this.selected = newVal.indexOf(this.customId) > -1 ? true : false;
      }
    }
  },
  created(){
    //console.log(this.dragchartdata.isUnlocked)
    VueEvent.$on('movechart',function(x,y,width,height){
      // this.dragchartdata.x = x;
      // this.dragchartdata.y = y;
      // this.dragchartdata.width = width;
      // this.dragchartdata.height = height;

    }.bind(this))
  },
  methods: {
    onResize: function (x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;

    },
    onDrag(x, y) {
      this.x = x;
      this.y = y;
      if(this.ctrlSelectArr.length > 0) {
        this.$emit("dragging", this.customId, x, y);
      }
      if(this.chartType == 'group'){
        VueEvent.$emit("combine_move",this.customId,x, y);
      }
    },
    onDragstop(x, y) {
      this.dragchartdata.x = x;
      this.dragchartdata.y = y;
      if(this.ctrlSelectArr.length > 0) {
        this.$emit("dragstop");
      }
      if(this.chartType == 'group'){
        VueEvent.$emit("combine_stop");
      }
    },
    onResizstop(x, y, width, height) {
      this.dragchartdata.x = x;
      this.dragchartdata.y = y;
      this.dragchartdata.width = width;
      this.dragchartdata.height = height;
    },
    handleSetLineChartData(type) {
      //this.lineChartData = lineChartData[type];
    },
    // 辅助线回调事件
    getRefLineParams(params) {

      this.$emit("getRefLineParams", params);

    },
    //点击控件
    onActivated(customId) {
        this.$emit("actived", customId);
        //将当前选中的元素信息发给RightPanel组件
        VueEvent.$emit("to_activated_msg", this.dragchartdata);
        //将当前选中的元素信息发给LayerItems组件
        VueEvent.$emit("to_layer_msg", this.dragchartdata);
    },
    //取消选中控件
    onDeactivated() {
      //VueEvent.$emit("to_activated_msg", "我是画布设置信息");
    }

  },
};
</script>

<style lang="scss">
.test1 {
  background-color: rgb(239, 154, 154);
}
.test2 {
  background-color: rgb(129, 212, 250);
}
.test3 {
  background-color: rgba(255, 255, 255, 0);
}

.my-dragging-class {
    background-color: rgba(9, 97, 230, 0.89);
    border: 1px solid black;
}
.my-resizing-class {
    background-color: blue;
    border: 1px solid black;
    color: white;
}
.my-active-class {
  background-color: rgba(9, 97, 230, 0.89);
    border: 1px solid black;
}
.ctrlSelected {
  border: 1px solid rgba(9, 97, 230, 0.89);
}
</style>
